<template>
    <div class="tabbar">
        <ul>
            <li v-for="(item, index) in tabBar" :key="index" @click="changeTabbar(item.path)">
                <span class="iconfont" :class="[item.icon, $route.path.includes(item.path)?'ischecked':'']"></span>
                <span class="title" :class="$route.path.includes(item.path)?'ischecked':''">{{ item.title }}</span>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name: 'Tabbar',
    data() {
        return {
            tabBar: [
                { path: '/home', icon: 'icon-shouye-xianxing', title: '首页' },
                { path: '/buy', icon: 'icon-cup', title: '点单' },
                { path: '/order', icon: 'icon-dingdandingdanmingxishouzhimingxi-xianxing', title: '订单' },
                { path: '/center', icon: 'icon-sharpicons_Panda', title: '我的' }
            ],
        }
    },
    methods: {
        changeTabbar(path) {
            if (this.$route.path == path) {
                return false;
            }
            this.$router.replace({ path: path }, () => {}, () => {});
        }
    }
}
</script>

<style lang="less" scoped>
.tabbar {
    position: fixed;
    left: 0;
    bottom: 0;
    // z-index: 999;
    background-color: #fff;
    width: 100%;
    height: 50px;

    ul {
        display: flex;
        height: 50px;
        padding: 5px 0;
        box-sizing: border-box;

        li {
            display: flex;
            flex-direction: column;
            flex: 1;
            align-items: center;
            justify-content: space-between;
            color: #646566;

            .iconfont {
                font-size: 1.3rem;
                font-weight: 500;
            }

            .title {
                font-size: 12px;
            }
        }
    }
}

.ischecked {
    color: blue;
}
</style>